<template>
	<view class="u-flex-col">
		<view class="m-tab">
			<view class="m-tab-item" :class="{'m-tab-item-active':tabIndex == 1}"  @click="tab_select(1)">
				<text>未使用</text>
			</view>
			<view class="m-tab-item" :class="{'m-tab-item-active':tabIndex == 2}"@click="tab_select(2)">
				<text>已使用</text>
			</view>
			<view class="m-tab-item" :class="{'m-tab-item-active':tabIndex == 3}" @click="tab_select(3)">
				<text>已过期</text>
			</view>
		</view>
		
		<view class="m-list">
			<view class="m-item" v-for="(item,index) in list">
				<view class="u-flex u-row-between">
					<text class="font1">{{item.title}}</text>
					<text class="font2">{{item.jian}}</text>
				</view>
				<view class="u-flex u-row-between">
					<text class="font3">有效期至 {{item.endTime}}</text>
					<text class="font4">满{{item.man}}元可用</text>
				</view>
				<view class="m-coupon"></view>
				<view class="u-flex u-row-between u-m-t-16">
					<view class="u-flex" @click="detail_fun(item)">
						<text class="font3 u-m-r-6" style="color: #33302D;">使用规则</text>
						<image src="../static/coupon/down.png" v-if="item.is_show" class="img" mode=""></image>
						<image src="../static/coupon/up.png"  v-else class="img" mode=""></image>
					</view>
					<view class="u-flex">
						<text class="btn" v-if="item.status == 0" @click="toHome">去使用</text>
						<text class="btn btn-extend2" v-else-if="item.status == 1">已使用</text>
						<!-- <text class="btn btn-extend1">已过期</text> -->
					</view>
				</view>
				<view class="m-text u-m-t-20" :class="{'hidden':!item.is_show}">
					<text>{{item.content || ''}}</text>
				</view>
			</view>
			<uni-load-more :status="status_load"></uni-load-more>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabIndex:1,
				show:false, 
				status_load: 'more',
				list:[],
				params:{
					scene:1,
					page:1,
					pagenum:10,
				},
			};
		},
		onReachBottom() {
				if (this.status_load == 'noMore') {
					return false;
				}
				this.get_list()
			},
			onShow() {
			// 	this.list = [{
			// 	"id": 3,
			// 	"yhqId": "5e04842f2aa635250",
			// 	"comId": 1001,
			// 	"userId": 376,
			// 	"jiluId": 18,
			// 	"fafangId": 0,
			// 	"title": "优惠券",
			// 	"man": 10,
			// 	"jian": 5,
			// 	"status": 0,
			// 	"startTime": "2019-12-26",
			// 	"endTime": "2020-12-26",
			// 	"dtTime": "2019-12-26 17:58:07",
			// 	"orderId": 0,
			// 	"tiaojian": "通用",
			// 	"image": "",
			// 	"color": "#3c8bec",
			// 	"content":"犯得上发射点发射点发生地方",
			// 	"is_show":false
			// }]
				this.params.page = 1
				this.get_list()
			},
			methods: {
				toHome(){
					uni.switchTab({
						url:'/pages/index/index'
					})
				},
				tab_select(index){
					if(this.tabIndex == index){
						return false;
					}
					this.tabIndex = index
					this.params.scene = index
					this.list = []
					this.params.page = 1
					this.$m.loading(3000)
					this.get_list()
				},
				detail_fun(item){
					item['is_show'] = !item['is_show']
				},
				get_list(){
					this.status_load = 'loading'
					// this.params.channel_id = this.type_child_id
					let params = this.params
					this.$http.getJson('users_myYhqList',params).then(res=>{
						console.log(res);
						uni.hideLoading()
						let data = res.data
						data.forEach((item,index)=>{
							data[index]['is_show'] = false
						})
		// 				data = [
		// 	{
		// 		"id": 3,
		// 		"yhqId": "5e04842f2aa635250",
		// 		"comId": 1001,
		// 		"userId": 376,
		// 		"jiluId": 18,
		// 		"fafangId": 0,
		// 		"title": "优惠券",
		// 		"man": 10,
		// 		"jian": 5,
		// 		"status": 0,
		// 		"startTime": "2019-12-26",
		// 		"endTime": "2020-12-26",
		// 		"dtTime": "2019-12-26 17:58:07",
		// 		"orderId": 0,
		// 		"tiaojian": "通用",
		// 		"image": "",
		// 		"color": "#3c8bec"
		// 	}
		// ]
						if(!this.$u.test.empty(data)){
							this.list = this.list.concat(data)
						}
						
						if (params.pagenum == data.length) {
							this.params.page += 1;
							this.status_load = 'more'
						} else {
							this.status_load = 'noMore'
						}
					})
				}
			}
		}
</script>

<style lang="scss">
	page{
		background: #f4f4f4;
	}
	.m-tab{
		display: flex;
		width: 750rpx;
		height: 100rpx;
		background-color: #fff;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10;
		border-bottom: 1px solid #EEEEEE;
		.m-tab-item{
			display: flex;
			height: 100%;
			flex: 1;
			font-size: 28rpx;
			color: #76706B;
			justify-content: center;
			align-items: center;
			position: relative;
		}
		.m-tab-item-active{
			color: #33302D;
			&::after{
				content: '';
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translate(-42rpx);
				width: 84rpx;
				height: 4rpx;
				background: #D3A358;
			}
		}
	}
	
	.m-list{
		display: flex;
		flex-direction: column;
		margin: 120rpx 30rpx 20rpx 30rpx;
		.m-item{
			display: flex;
			flex-direction: column;
			padding: 30rpx;
			background: #fff;
			border-radius: 10rpx;
			margin-bottom: 20rpx;
		}
	}
	.font1{
		font-size: 28rpx;
		color: #33302D;
		font-weight: 800;
	}
	.font2{
		font-size: 48rpx;
		color: #D3A358;
		&::before{
			content: '￥';
			font-size: 30rpx;
		}
	}
	.font3{
		font-size: 24rpx;
		color: #9B958F;
	}
	.font4{
		font-size: 24rpx;
		color: #9B958F;
	}
	
	.m-coupon{
		height: 1px;
		border-bottom: 1px #EEEEEE dashed;
		margin-top: 22rpx;
		position: relative;
		&::before{
			content: '';
			position: absolute;
			width: 10rpx;
			height: 20rpx;
			border-top-right-radius: 10rpx;
			border-bottom-right-radius: 10rpx;
			background: #f4f4f4;
			left: -30rpx;
			top: -10rpx;
		}
		&::after{
			content: '';
			position: absolute;
			width: 10rpx;
			height: 20rpx;
			border-top-left-radius: 10rpx;
			border-bottom-left-radius: 10rpx;
			background: #f4f4f4;
			right: -30rpx;
			top: -10rpx;
		}
	}
	.img{
		width: 16rpx;
		height: 8rpx;
	}
	.btn{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 120rpx;
		height: 48rpx;
		background: linear-gradient(180deg, #E4C89A 0%, #D3A358 100%);
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		font-size: 24rpx;
		color: #fff;
	}
	.btn-extend1{
		background: #BDBDBD;
	}
	.btn-extend2{
		background: #FFA200;
	}
	.m-text{
		transition: all 0.3;
		font-size: 24rpx;
		color: #9B958F;
	}
	.hidden{
		display: none;
		height: 0;
		opacity: 0;
	}
</style>
